<template>
  <div class="course-list-wrapper">
    <div class="panel-title">
      <div class="sub" v-if="courseListProps.subtitle">
        {{ courseListProps.subtitle }}
      </div>
      <div v-if="courseListProps.title">{{ courseListProps.title }}</div>
    </div>
    <template v-if="courseListProps.list && courseListProps.list.length">
      <div class="course-list">
        <div
          class="course-item"
          :class="theme"
          v-for="item in courseListProps.list"
          :key="item.id"
          @click.stop="godetail(item.id, courseListProps.type)"
        >
          <img
            class="course-cover"
            v-lazy="'https://images.weserv.nl/?url=' + item[coverKey]"
            alt=""
            :key="item.cover"
          />
          <div class="course-info">
            <p class="course-name">{{ item[titleKey] }}</p>
            <div class="course-teacher">{{ subKey && item[subKey] }}</div>
            <el-divider />
            <div class="course-date">
              <img class="icon-date" src="@/assets/home/icon-date.png" alt="" />
              <span>
                {{ item[dateKey] && item[dateKey].slice(0, 10) }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div
        class="more-entry"
        :class="theme"
        @click.stop="viewMore"
        v-if="showMoreEntry"
      >
        查看更多
      </div>
    </template>
    <el-empty
      v-if="courseListProps.list && courseListProps.list.length == 0"
      description="暂无数据"
    />
  </div>
</template>

<script setup>
  import { useRouter } from "vue-router";

  const router = useRouter();

  const courseListProps = defineProps({
    title: String,
    type: Number,
    list: Array,
    subtitle: String,
    moreUrl: String,
    theme: String,
    coverKey: {
      type: String,
      default: "cover",
    },
    titleKey: {
      type: String,
      default: "coursetitle",
    },
    subKey: {
      type: String,
      default: "displayname",
    },
    dateKey: {
      type: String,
      default: "time",
    },
    showMoreEntry: {
      type: Boolean,
      default: true,
    },
  });

  const godetail = (id, type) => {
    let url = "";
    if (type == 1) {
      url = `https://zyk.icve.com.cn/courseDetailed?id=${id}`;
    } else if (type == 4) {
      url = `https://zyk.icve.com.cn/materialDetailed?id=${id}&docid=${id}`;
    }

    window.open(url);
  };

  const viewMore = () => {
    router.push(courseListProps.moreUrl);
  };
</script>

<style lang="scss" scoped>
  @media screen and (min-width: 1200px) {
    .course-list-wrapper {
      .panel-title {
        line-height: 30px;
        margin-bottom: 19px;
        letter-spacing: 1px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #222222;
      }
      .sub {
        line-height: 22px;
        letter-spacing: 1px;
        font-size: 16px;
        font-weight: normal;
        color: #666666;
      }
      .course-list {
        display: grid;
        justify-content: space-between;
        flex-wrap: wrap;
        grid-template-columns: repeat(auto-fill, 276px);
        grid-gap: 26px 0;
      }
      .course-item {
        width: 276px;
        background: #fdfcff;
        cursor: pointer;
        transition: all 0.5s;
        &.dark {
          background: #fff;
        }
        &:hover {
          background: #1cabd9;
          div,
          p {
            color: #fff;
          }
          .icon-date {
            filter: brightness(300%);
          }
        }
        .course-cover {
          width: 100%;
          height: 154px;
          display: block;
          will-change: transform;
        }
        .course-info {
          width: 100%;
          height: 88px;
          padding: 10px 22px 0;
        }
        .course-name {
          height: 18px;
          line-height: 18px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          color: #222222;
        }
        .course-teacher {
          height: 28px;
          line-height: 28px;
          font-size: 12px;
          color: #666666;
        }
        .el-divider--horizontal {
          margin: 0 0 7px 0;
          border-color: #e4e4e4;
        }
        .course-date {
          display: flex;
          align-items: center;
          font-size: 10px;
          color: #888888;
        }
        .icon-date {
          width: 12px;
          margin-right: 6px;
        }
      }
      .more-entry {
        width: 95px;
        height: 27px;
        margin: 26px auto 0;
        border-radius: 6px;
        border: 1px solid #d0d0d0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        letter-spacing: 1px;
        color: #999999;
        cursor: pointer;
      }
    }
  }

  @media screen and (max-width: 1200px) {
    .course-list-wrapper {
      .panel-title {
        line-height: 1.5;
        margin-bottom: 10vw;
        letter-spacing: 2px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #222222;
      }
      .sub {
        line-height: 22px;
        letter-spacing: 1px;
        font-size: 16px;
        font-weight: normal;
        color: #666666;
      }
      .course-list {
        display: grid;
        justify-content: space-between;
        flex-wrap: wrap;
        grid-template-columns: repeat(auto-fill, 45vw);
        grid-gap: 4vw 0;
      }
      .course-item {
        width: 45vw;
        background: #fdfcff;
        cursor: pointer;
        transition: all 0.5s;
        &.dark {
          background: #fff;
        }
        &:hover {
          background: #1cabd9;
          div,
          p {
            color: #fff;
          }
          .icon-date {
            filter: brightness(300%);
          }
        }
        .course-cover {
          width: 100%;
          display: block;
          will-change: transform;
        }
        .course-info {
          width: 100%;
          height: 23vw;
          padding: 2vw 4vw 0;
        }
        .course-name {
          height: 6vw;
          line-height: 6vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 3.5vw;
          color: #222222;
        }
        .course-teacher {
          height: 4vw;
          line-height: 4vw;
          font-size: 3vw;
          color: #666666;
        }
        .el-divider--horizontal {
          margin: 2vw 0;
          border-color: #e4e4e4;
        }
        .course-date {
          display: flex;
          align-items: center;
          font-size: 3vw;
          color: #888888;
        }
        .icon-date {
          width: 3vw;
          margin-right: 2vw;
        }
      }
      .more-entry {
        width: 28vw;
        height: 9vw;
        margin: 8vw auto 0;
        border-radius: 6px;
        border: 1px solid #d0d0d0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4vw;
        letter-spacing: 1px;
        color: #999999;
        cursor: pointer;
      }
    }
  }
</style>
